<template slot-scope="scope">

    <div class="root pre-scrollable " ref="myRoot"><!--根部分-->
        <dept-area-add :deptCode="dept.deptCode" @changeDeptArea="deptAreaAddClose" ref="areaAdd" v-if="areaAddOpen"/>
        <el-container>
            <!--子菜单-->
            <el-aside width="200px" class="aside">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        style="height: 600px;overflow-y: auto"
                        @close="handleClose">
                    <!-- 部门树 -->
                    <div class="left_bar">
                        <el-tree :data="deptTree"
                                 :props="defaultProps"
                                 :expand-on-click-node="false"
                                 :highlight-current="true"
                                 @node-click="handleNodeClick"
                                 node-key="deptCode"
                                 ref="tree">
                        </el-tree>
                    </div>
                </el-menu>
            </el-aside>
            <!--主要内容-->
            <el-main>
                <!--部门信息-->
                <div class="message_div" ref="deptInfo">
                    <el-row>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">部门名称：</span>
                            <span class="dept_content">{{deptDetail.deptName}}</span>
                        </el-col>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">部门地址：</span>
                            <span class="dept_content">{{deptDetail.deptAddress}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">部门领导：</span>
                            <span class="dept_content">{{deptDetail.leaderName}}</span>
                        </el-col>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">领导人电话：</span>
                            <span class="dept_content">{{deptDetail.leaderPhone}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">上级部门：</span>
                            <span class="dept_content">{{deptDetail.parentName}}</span>
                        </el-col>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <span class="message_span">部门介绍：</span>
                            <span class="dept_content">{{deptDetail.remark}}</span>
                        </el-col>
                    </el-row>
                </div>

                <!--部门成员-->
                <div class="dept_area">
                    <p class="dept_area_title">部门需求区域：
                        <el-button @click.native="deptAreaAddClick" size="small" type="primary" icon="el-icon-edit">新增需求区域</el-button>
                    </p>

                    <p  class="dept_area_title">部门负责区域级别：
                        <el-select id="lookArea"
                                   size="small"
                                   v-model="deptDetail.lookArea"
                                   placeholder="请选择">
                            <el-option
                                    v-for="(item, indexkey) in lookAreaList"
                                    :key="item.lookArea"
                                    :value="item.lookArea"
                                    :label="item.lookAreaName">
                            </el-option>
                        </el-select>
                        <el-button style="margin-left: 10px" size="small" type="primary" slot="append" icon="el-icon-edit" @click="editLookArea">修改负责区域</el-button>
                    </p>

                </div>
                <el-table
                        height="600px"
                        :data="deptAreaList"
                        border
                        style="width: 100%;line-height: 30px;">
                    <el-table-column
                            prop="id"
                            align="center"
                            label="id"
                            width="100"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="provinceCode"
                            align="center"
                            label="省编码"
                            width="70"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="provinceName"
                            align="center"
                            label="省"
                            width="100"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="cityCode"
                            align="center"
                            label="市编码"
                            width="100"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="cityName"
                            align="center"
                            label="市"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="regionCode"
                            align="center"
                            label="区编码"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="regionName"
                            align="center"
                            label="区"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="streetCode"
                            align="center"
                            label="街道编码"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="streetName"
                            align="center"
                            label="街道"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="communityCode"
                            align="center"
                            label="社区编码"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="communityName"
                            align="center"
                            label="社区"
                            width="220">
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="删除" width="150" height="10">
                        <template slot-scope="scope">
                            <el-button
                                    type="danger"
                                    size="mini"
                                    @click="deptAreaDelete(scope.$index,scope.row)">
                                删除
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
                <div style="height: 50px;width: 10px;"></div>
            </el-main>
        </el-container>

    </div><!--根部分(end)-->
</template>

<script>
    import deptAreaAdd from "./deptAreaAdd.vue"

    export default {
        components: {
            deptAreaAdd
        },
        data() {
            return {
                areaAddOpen: false,
                // 树结构默认指定
                defaultProps: {
                    children: 'children',
                    label: 'deptName'
                },

                // 部门树
                deptTree: [],
                deptList: {},
                deptObj: {
                    deptName: "",
                    deptCode: "",
                },
                dept: {
                    deptName: "",
                    deptCode: "",
                    leaderCode: "",
                    leaderName: "",
                    leaderPhone: "",
                    parentName: "",
                    parentCode: "",
                    deptAddress: "",

                },
                deptDetail: {},
                deptAreaList: [],
                user: {
                    workNumber: '',
                    userCode: '',
                    userName: '',
                    email: '',
                    userPhone: '',
                    deptCode: '',
                    deptName: '',
                    postCode: '',
                    postName: '',
                },
                lookAreaList:[
                    {
                        lookArea:"city",
                        lookAreaName:"城市"
                    },
                    {
                        lookArea:"region",
                        lookAreaName:"区域"
                    },
                    {
                        lookArea:"street",
                        lookAreaName:"街道"
                    },
                    {
                        lookArea:"community",
                        lookAreaName:"社区"
                    }
                ]
            }
        },
        mounted() {

        },
        created: function () {
            var vm = {};
            vm = this;
            var sendObj = {};
            var options = {
                method: 'POST',
                data: sendObj,
                url: "dept/selectTrees",
            };
            this.$ajax(
                options
            ).then(function (response) {
                vm.deptTree = response.data.result;
            }).catch(function (error) {
                vm.$message.error('页面：获取部门树失败！');
            });
        },
        methods: {
            editLookArea(){
              var vm = this;
                if (vm.deptDetail.lookArea!=null && vm.deptDetail.lookArea!='') {
                    this.$confirm('是否修改当前部门负责区域级别？', '操作提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        let vm = this;
                        vm.loading = true;
                        var sendObj = {}
                        sendObj.entity =
                            {
                            "deptCode": vm.dept.deptCode,
                            "lookArea" : vm.deptDetail.lookArea
                            }
                        var option = {
                            method: 'POST',
                            headers: {'content-type': 'application/json'},
                            data: sendObj,
                            url: "dept/updateLookArea",
                        };
                        this.$ajax(
                            option
                        ).then(function (response) {
                            vm.$notify.success(response.data.message);
                            vm.loading = false;
                        }).catch(function (error) {
                            vm.$notify.error(error);
                        })
                    })
                }else{
                    vm.$alert('请选择部门负责区域级别后再进行提交！', '操作错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                }
            },
            deptAreaAddClose() {
                var vm = this;
                vm.areaAddOpen = false;
                vm.getDeptAreaByDeptCode(vm.dept.deptCode);
            },
            deptAreaAddClick() {
                var vm = this;
                vm.areaAddOpen = true;
                vm.$nextTick(() => {
                    vm.$refs.areaAdd.visible = true;
                })
            },

            //打开客户详情面板
            deptAreaDelete(index, rows) {
                this.$confirm('是否删除当前需求区域？', '操作提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    let vm = this;
                    let id = rows.id;
                    vm.loading = true;
                    var sendObj = {}
                    sendObj.entity = {"id": id}
                    var option = {
                        method: 'POST',
                        headers: {'content-type': 'application/json'},
                        data: sendObj,
                        url: "dept/deleteDeptAreaById",
                    };
                    this.$ajax(
                        option
                    ).then(function (response) {
                        vm.$notify.success(response.data.message);
                        vm.loading = false;
                        vm.getDeptAreaByDeptCode(vm.dept.deptCode);
                    }).catch(function (error) {
                        vm.$notify.error(error);
                    })
                })
            },
            getDeptdeptDetail() {
                var vm = {};
                vm = this;
                var sendObj = {};
                sendObj.entity = {"deptCode": this.dept.deptCode};
                var options = {
                    method: 'POST',
                    data: sendObj,
                    url: "dept/deptDetails",
                };
                this.$ajax(
                    options
                ).then(function (response) {
                    vm.deptDetail = response.data.result;
                }).catch(function (error) {
                    vm.$message.error('页面：获取部门树失败！');
                });

            },
            handleNodeClick(data) {
                this.initDeptObj();
                this.dept = data;
                this.getDeptdeptDetail();
                this.getDeptAreaByDeptCode(data.deptCode);
            },

            initDeptObj() {
                this.deptObj = {
                    deptName: '',
                    deptCode: '',
                }
            },

            getDeptAreaByDeptCode(aVal) {
                var vm = {};
                vm = this;
                var entity = {};
                entity.deptCode = aVal;
                var options = {
                    method: "POST",
                    data: entity,
                    url: "dept/findDeptAreaByDeptCode"
                };
                this.$ajax(
                    options
                ).then(function (response) {
                    if (!response.data.isException) {
                        vm.deptAreaList = response.data.result;
                    }
                }).catch(function (error) {
                    vm.$message({
                        showClose: true,
                        message: '页面:部门需求区域列表加载失败!dept/findDeptAreaByDeptCode',
                        type: 'error'
                    })
                })
            },
            /*返回键*/
            goBack() {
                window.history.back();
            },
            /*子菜单打开事件*/
            handleOpen(key, keyPath) {

            },
            /*子菜单关闭事件*/
            handleClose(key, keyPath) {

            },
            created: function () {
                var vm = {};
                vm = this;
                var sendObj = {};
                var options = {
                    method: 'POST',
                    data: sendObj,
                    url: "dept/selectTrees",

                };
                this.$ajax(
                    options
                ).then(function (response) {
                    vm.deptTree = response.data.result;
                }).catch(function (error) {
                    vm.$message.error('页面：获取部门树失败！');
                });
            },
            //查看详情
            empDetails(empCode, flag) {
                this.$router.push({
                    name: "empDetails",
                    params: {
                        empParams: {
                            empCode: empCode,
                            flag: flag,
                        }
                    }
                })
            },
        },

    }

</script>

<style scoped>
    body {
        margin-left: 200px;
        margin-right: 200px;
    }

    .root {
        min-width: 1000px;
        min-height: 900px;
    }

    .pre-scrollable {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        max-height: 83vh;
        overflow-y: auto;
    }

    .left_bar {
        bottom: 50px;
    }

    .titles {

        min-height: 50px;
        border-bottom: 1px solid rgb(242, 242, 242);
    }

    /*导航栏DIV*/
    .navigation_div {
        width: 100%;
        height: 50px;
    }

    /*导航栏返回按钮*/
    .navigation_button_back {
        float: left;
        margin-left: 20px;
    }

    /*导航栏背景控制*/
    .navigation_button_background {
        height: 35px
    }

    /*部门信息div*/
    .message_div {
        width: 100%;
        padding-right: 20px;
        background-color: white;
    }

    /*部门信息span*/
    .message_span {
        color: #FE980F;
        float: left;
        line-height: 30px;
        margin-left: 20px;
        margin-top: 5px;
    }

    /*部门成员div*/
    .dept_area {
        width: 100%;
        margin-top: 10px;
        padding-right: 20px;
        background-color: white;
        min-height: 60px;
    }

    .dept_area_add {
        width: 100%;
        margin-top: 5px;
        padding-right: 20px;
        background-color: white;
        min-height: 60px;
    }

    .dept_area_null {
        width: 100%;
        height: 450px;
        background-color: white;
        margin-top: 10px;
        padding-right: 20px;
    }

    /*部门成员标题*/
    .dept_area_title {
        float: left;
        font-size: 20px;
        font-weight: bold;
        margin-left: 10px;
    }

    /*人员信息查看详情*/
    .dept_area_a {
        float: left;
        margin: 10px 30px;
        color: #FE980F;
        font-size: 16px;
    }

    /*人员信息标题*/
    .dept_area_p_title {
        float: left;
        line-height: 30px;
        margin-top: 5px;
    }

    /*人员信息内容*/
    .dept_content {
        float: left;
        line-height: 30px;
        margin-top: 5px;
        color: #8c939d;
    }

    .aside {
        text-align: left;
        min-height: 900px;
    }

</style>